<template>
  <div>
    <BHeader></BHeader>
    <div class="pay">
      <el-steps :active="active" finish-status="success" simple>
        <el-step title="我的购物车" icon="el-icon-shopping-cart-2"></el-step>
        <el-step title="确认订单" icon="el-icon-receiving"></el-step>
        <el-step title="完成订单" icon="el-icon-document-checked"></el-step>
      </el-steps>
      <div class="order">
        <div class="top">
          <div class="top_left">
            <h2 style="display:block">订单提交成功!&nbsp;去付款咯~</h2>
            <p style="display:block">
              请在<font color="red">30分钟</font>内完成支付,超时后将取消订单
            </p>
            <p style="display:block">收货信息:&nbsp;xxxxx</p>
          </div>
          <div class="top_right">
            <p>
              应付总额:&nbsp;&nbsp;&nbsp;<font color="orange" size="5px">{{
                payPrice
              }}</font
              >元
            </p>
          </div>
        </div>
        <div class="bottom">
          <div style="height:80px">
            <p>订单号：&nbsp;&nbsp;&nbsp;{{ id }}</p>
          </div>
          <div style="height:80px">
            <p>
              支付方式：&nbsp;&nbsp;&nbsp;
              <el-radio v-model="radio" label="1">支付宝</el-radio>
              <el-radio v-model="radio" label="2">微信</el-radio>
            </p>
          </div>
          <div style="height:80px">
            <el-button type="primary" round>进行支付</el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<style scoped>
.order {
  width: 1200px;
  height: 400px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-around;
  margin: 0 auto;
}
.top {
  width: 1200px;
  border-bottom: 1px solid gainsboro;
  display: flex;
}
.top_left {
  width: 300px;
  text-align: left;
}
.top_right {
  width: 900px;
  text-align: center;
}
.bottom {
  width: 1200px;
  text-align: center;
}
</style>

<script>
import BHeader from "../../components/BHeader.vue";
import {getOrderById} from "../../api/order/order"
export default {
  name: "Pay",
  components: {
    BHeader,
  },
  data() {
    return {
      active: 3,
      id: "",
      radio: "1",
      payPrice: 0,
    }
  },
  methods: {
    getOrder(){
        getOrderById(this.$route.query.id).then((res)=>{
          if(res.flag){
            this.id = res.data.id
            this.payPrice = res.data.payPrice
          }
        })
    }
  },
  created() {
    this.getOrder()
  },
};
</script>
